<script setup>
import { computed, ref } from 'vue';

let familyName = ref("kevin")
let givenName = ref("abcque")

// let total = computed(
//     ()=>{
//         console.log("call computed");

//     return givenName.value + " " + familyName.value
//     }
// )

// 第一种写法:getter/setter 形式
// let total = computed(
//     {
//         get: () => {
//             console.log("get computed property");

//             return givenName.value + " " + familyName.value
//         },
//         set: (val) => {
//             console.log("set computed property");

//             // 解构赋值
//             [givenName.value, familyName.value] = val.split(" ")
//         }
//     }
// )

// 第二种写法:get/set 函数形式
// let total = computed(
//     {
//         get() {
//             console.log("get computed property");

//             return givenName.value + " " + familyName.value
//         },
//         set(val) {
//             console.log("set computed property");

//             // 解构赋值
//             [givenName.value, familyName.value] = val.split(" ")
//         }
//     }
// )

let total = computed(
    {
        get() {
            console.log("get computed property");

            return givenName.value + " " + familyName.value
        },
        set(newValue, oldValue) {
            console.log("set computed property");
            console.log("oldValue: " + oldValue);
            console.log("newValue: " + newValue);

            // 解构赋值
            [givenName.value, familyName.value] = newValue.split(" ")
        }
    }
)


function fullName() {
    console.log("call function fullName()");

    return givenName.value + " " + familyName.value
}
</script>

<template>
    <h2>{{ givenName }} {{ familyName }}</h2>
    <h2>{{ fullName() }}</h2>

    <!-- 计算属性具有缓存功能，在依赖变量不变的情况下，多次调用只执行一次。 -->
    <h2>{{ total }}</h2>

</template>

<style></style>